<template>
	<div>
		<div class="relative " style="height:46px ;">
			<van-nav-bar left-arrow style="background-color: #25a4bb; color: #fff;" title="我的游记" left-arrow fixed  @click-left="back" @click-right="bacsk">
				<template #left>
					<van-icon color="#fff" name="arrow-left" size="23"/>
				</template>
				<template #right>
					<div>
						<van-icon style="transform: translateY(10px);" class-prefix="icon"  name="luotuo" size="23" />
						<div style="margin-top: -6px;">首页</div>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<div style="padding: 10px 15px;">
			<div class="data-item relative" v-for="item,i in datalist" :key="i" :style="{'background-image':item.images[0]?`url(${item.images[0]})`:`url('https://img1.qunarzz.com/travel/poi/1612/ee/3bd092f61157ee37.jpg_591x351x70_48dd838a.jpg')` }" @click="togonglv(item)">
				<div style="font-size: 18px;margin-bottom: 5px;">{{item.title}}</div>
				<div style="font-size: 12px;">{{item.gotime}}出发/共{{item.day}}天</div>
				<div class="absolute flex flex_align">
					<van-image
					  round
					  width="30"
					  height="30"
					  :src="item.active"
					  style="margin-right: 10px;border: solid 2px #fff;"
					/>
					<span>{{item.username||'去哪儿用户'}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {contentdata} from "@/api/liuhao/index"
	export default{
		data() {
			return{
				datalist:[],
				userinfo:{}
			}
		},
		created() {
			this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
			this.getcontentdata()
		},
		methods:{
			getcontentdata(){
				contentdata({uid:this.userinfo.uid}).then(res=>{
					this.datalist = res
				})
			},
			back(){
				this.$router.go(-1)
			},
			bacsk(){
				this.$router.push("/index")
			},
			togonglv(item){
				this.$router.push("/youji/"+item.id)
			}
		}
	}
</script>

<style scoped lang="scss">
	div{
		box-sizing: border-box;
	}
	::v-deep .van-nav-bar__title{
		color: #fff;
	}
	.data-item{
		background-repeat: no-repeat;
		background-size: cover;
		height: 210px;
		width: 100%;
		border-radius: 4px;
		padding: 10px;
		color: #fff;
		text-shadow: 1px 1px rgba(0,0,0,0.4);
		margin-bottom: 10px;
		.absolute{
			bottom: 10px;
		}
	}
</style>